<template>
  <s-layout class="set-wrap" title="发货" :bgStyle="{ color: '#f7f7f7' }">
    <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无发货记录" icon="/static/collect-empty.png" />
    <view class="flex overflow-hidden flex-col px-4 bg-white rounded-lg">
      <view class="flex gap-7 items-center py-2">
        <view class="text-[.9375rem] text-[#333333] flex-none"> 物流单号 </view>
        <uni-easyinput
          v-model="state.express_no"
          placeholder="请输入物流单号"
          type="text"
          :inputBorder="false"
          placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
        >
        </uni-easyinput>
      </view>
      <u-line></u-line>

      <view class="flex relative gap-7 items-center py-2">
        <view class="size-full absolute inset-0 z-50" @click="openCategory"></view>

        <view class="text-[.9375rem] text-[#333333] flex-none"> 物流公司 </view>
        <uni-easyinput
          v-model="state.express_name"
          type="text"
          placeholder="请填写选择物流公司"
          :inputBorder="false"
          disabled
          placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          :styles="{ disableColor: '#fff', color: '#333' }"
        >
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </uni-easyinput>
      </view>
    </view>
    <view class="py-5"></view>
    <u-picker :show="state.showCategory" :columns="[state.list]" keyName="name" @confirm="onConfirm" @cancel="state.showCategory = false"> </u-picker>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="confirmShipment">
        <view class="font-medium text-[16px] text-[#FFFFFF]"> 确认发货 </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    showCategory: false,
    list: [],
    loading: true,
    // 物流单号
    express_no: '',
    // 物流公司ID
    express_id: '',
    // 物流公司名称
    express_name: '',
    // 订单ID
    order_id: '',
  });

  onLoad((e) => {
    state.value.order_id = e.id;
  });
  express();
  function express() {
    sheep.$api.yy.express().then((res) => {
      state.value.list = res.data;
    });
  }

  function openCategory() {
    state.value.showCategory = true;
  }
  function confirmShipment() {
    let obj = {
      order_id: state.value.order_id,
      express_id: state.value.express_id,
      express_no: state.value.express_no,
    };
    sheep.$api.yy.orderDispatch(obj).then((res) => {
      if (res.code === 1) {
        uni.showToast({
          title: '发货成功',
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      }
    });
  }
  function onConfirm(e) {
    console.log('🚀 ~ onConfirm ~ e:', e);
    state.value.express_id = e.value[0].id;
    state.value.express_name = e.value[0].name;
    state.value.showCategory = false;
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }
</style>
